@import './variables.scss';
.login-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: url(./images/login-bg01.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: $transition-base;
    @media (max-width: $mobile-max-width){
        background: url(./images/login-bg02.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

    }
    .login-form {
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: $transition-base;
        @media (max-width: $mobile-max-width){
            width: 100%;
        }
        .el-form-item__content{
            display: flex;
        }
        .el-form-item {
            .login-input{
                  display: flex;
                  align-items: center;
            }
        }
        .logo {
            width: 60%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2em;
            transition: $transition-base;
            @media (max-width: $mobile-max-width){
                width: 100%;
                flex-direction: column;
            }
            .logo-title {
                height: 80%;
                display: block;
                margin-left: 1.5em;
                transition: $transition-base;
                @media (max-width: $mobile-max-width){
                    height: 50%;
                    margin-left: 0;
                }
            }
        }
        .box {
            width: 60%;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            transition: $transition-base;
            @media (max-width: $mobile-max-width){
                width: 80%;
            }
            form {
                .has-showpass {
                    input {
                        padding-right: 36px;
                    }
                    .show-pwd {
                        width: 32px;
                        height: 42px;
                        align-items: center;
                        position: absolute;
                        top: 0;
                        right: 0;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
.passwordLevel {
    padding: 2px;
    .level {
        .level1, .level2, .level3{
            height: 3px;
            background:rgba(170,170,170, .5);
        }
    }
    margin-bottom: 10px;
    &.level1 {
        .level1 {
            background-color: #ff3300;
            color: #FFFFFF;
        }
    }
    &.level2 {
        .level1, .level2 {
            background-color: #ff6400;
            color: #FFFFFF;
        }
    }
    &.level3 {
        .level1, .level2, .level3 {
            background-color: #06b172;
            color: #FFFFFF;
        }
    }
}

